@font-face {
  font-family: 'tttgbnumber';
  src: url('../../font/tttgbnumber.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NZBZ';
  src: url('../../font/NZBZ.TTF');
  font-weight: normal;
  font-style: normal;
}

.header {
  display: flex;
  top: 50px;
}
.card_box {
  margin: 30px 30px 30px 30px;
  width: 740px;
  display: flex;
  flex-wrap: nowrap;
  background: radial-gradient(at top left, #ffffff10, #d7edea10);
  border-top: 1px solid #ffcc80;
  border-left: 1px solid #FFF5EE;
  border-right: 1px solid #FFF5EE;
  border-bottom: 1px solid #FFFAF0;
  box-shadow: 1px 2px 6px rgba(170, 31, 0, 0.2),
    3px 8px 12px rgba(71, 35, 22, 0.3);
  z-index: 999;
  border-radius: 20px;
}
.wupin {
  display: flex;
  flex-wrap: wrap;
}
.user_font_title {
  text-align: center;
  padding-left: 0px;
  font-size: 30px;
  font-family: 'tttgbnumber';
  font-weight: 600;
  color: #FFFFFF;
}
.use_data {
  margin: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 740px;
}
.item {
  margin: 10px;
  padding: 10px;
  flex-grow: 2;
  width: 160px;
  border-top: 1px solid #FFFFF0;
  border-left: 1px solid #FFFFF0;
  border-right: 1px solid #FFFFF0;
  border-bottom: 1px solid #FFFFF0;
  box-shadow: 1px 2px 6px rgba(170, 31, 0, 0.2),
    3px 8px 12px rgba(71, 35, 22, 0.3);
  z-index: 999;
  border-radius: 5px;
  margin-top: 20px;
}
.item_title {
  display: block;
  text-align: center;
  font-family: 'NZBZ';
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  background-color: #221d103b;
}

.item_int {
  display: block;
  font-family: 'tttgbnumber';
  font-size: 16px;
  font-weight: 500;
  color: #E0EEEE;
}

.attribute {
  font-size: 18px;
  margin-bottom: 5px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: url("../../img/player/player.jpg");
  background-size: 100% auto;
} */
body {
  width: 100%;
  text-align: center;
  background:url('../../img/guojia/guojia.jpg');
  background-size: 100% 100%;
}

:root {
  font-size: 14px;
}

li {
  list-style: none;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-card {
  border-radius: 12px;
  width: 90%;
  padding: 8px;
  margin-bottom: 16px;
  background-image: radial-gradient(
    rgba(180, 153, 152, 0.408),
    rgba(251, 237, 84, 0.312)
  );
}

.data-card label {
  font-weight: bold;
}

.data-card ul {
  padding-left: 20px;
  margin-top: 5px;
}

.data-card li {
  list-style: none;
  padding: 4px 8px;
  /* list-style-type: disc; */
  margin-bottom: 5px;
  font-size: 14px;
  background-color: rgba(19, 21, 22, 0.486);
  margin: 12px;
  color: white;
  border-radius: 8px;
}

.headbox {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.avt {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}

.hbg {
  padding: 1px 0;
  background-color: rgba(19, 21, 22, 0.486);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
}

.avt img {
  width: 100%;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.left .hbg {
  width: 70px;
}

.right {
  flex: 1;
}
.wupin {
    display: flex;
    flex-wrap: wrap;
  }